body,html{
    border: 0;
    padding: 0;
    margin: 0;
    background-color: #123;
    overflow-x: hidden;
    width: 100%;
    height:100%;
}
.title{
    background-color: #2b819b;
    width: 100vw;
    height:12vw;
    padding: 2vw;
    overflow: hidden;
    position: fixed;
    z-index: 99;
}
.title img{
    width: 12vw;
    height:12vw;
    float: left;
}
.title .company{
    color: #fff;
    font-size: 6vw;
    float: left;
    line-height: 6vw;
    margin: 0 0 0 1vw;
    min-width: 50vw;
    max-width: 70vw;
    max-height: 6vw;
    overflow-y: hidden;
}
.title .time{
    color: #ffffff66;
    font-size: 4vw;
    margin: 2vw 0 0 1vw;
    line-height: 4vw;
    float: left;
}
.top_line{
    height:0;
    width:100vw;
    background-color: #2b819b00;
    position: absolute;
    top:0;
}
.window_head{
    width: 100%;
    height: 8vw;
    background-color: #2b819b88;
}
.window_head .name{
    font-size: 4vw;
    line-height: 8vw;
    margin: 0 0 0 2vw;
    color: #ffffffaa;
}
.center_left{
    width:100vw;
    height: auto;
    margin: 16vw 0 0 0;
    border: 0;
    overflow-y: hidden;
    z-index: 99;
}
.center_left .equipment{
    width: 80vw;
    height: auto;
    margin-top: 10vw;
    margin-left: 10vw;
}
.center_left .equipment .img{
    width: 80vw;
    height: 80vw;
    background-color: #FF66667F;
}
.center_left .equipment .img img{
    width:70vw;
    height:70vw;
    margin: 5vw;
}
.center_left .equipment .name{
    width: 80vw;
    text-align: center;
    color: #2b819b;
    font-weight: 900;
    font-size: 6vw;
    line-height: 8vw;
    margin: 0;
}
.center_left .equipment .list{
    width:78vw;
    max-height:40vw;
    margin: 4vw 0 4vw 0;
    border-color: #2b819b88;
    border-width: 1px 0 0 0;
    border-style: solid;
    padding: 1vw;
    overflow-x: hidden;
    opacity: 0.5;
    margin-bottom: 10vw;
}
.center_left .equipment .list .list_item{
    width:24vw;
    height: 24vw;
    position: relative;
    float: left;
    background-color: #FF66667F;
    margin: 0 1vw 1vw 0;
}
.center_left .equipment .list .list_item img{
    width:22vw;
    height: 22vw;
    margin: 1vw;
}
.center_left .equipment .list .list_item p{
    position: absolute;
    font-size: 3vw;
    color: white;
    line-height: 3vw;
    right: 0;
    bottom: 0;
    margin: 0 1vw 1vw 0;
    text-align: right;
}
.center_right{
    width: 100vw;
    height:auto;
}
.center_right .name{
    font-size: 4vw;
    color:#fffa;
    margin: 0;
    line-height: 8vw;
    padding-left: 2vw;
    background-color: #2b819b88;
}
.center_right .program{
    font-size: 3vw;
    height: 3vw;
    color:#2b819b;
    margin: 1vh 0 0 10vw;
    font-weight: 900;
}
.center_right .img{
    height:80vw;
    width:80vw;
    background-color: #66FF667F;
    margin: 5vw 10vw 5vw 10vw;
}
.center_right .img img{
    width: 70vw;
    height:70vw;
    margin: 5vw;
}
.center_right .canvas{
    width:50vw;
    height:40vw;
    margin-left: 10vw;
    margin-bottom: 10vw;
}
.center_right .data{
    width:29.5vw;
    height: 40vw;
    border-style: solid;
    border-width: 0 0.2vw 0 0;
    border-color: #2b819b88;
    padding: 0 10vw 0 0;
    float: right;
}
.center_right .data .child_name{
    margin: 0;
    font-size: 3vw;
    width: 100%;
    text-align: right;
    color: #2b819b88;
}
.center_right .data .child_data{
    margin: 0 0 2vw 0;
    font-size: 5vw;
    width: 100%;
    text-align: right;
    color: #ffffff88;
}
.bottom{
    width: 100vw;
    height: auto;
    margin: 0 0 8vw 0;
    border: solid 1px #2b819b88;
}
.bottom .tip{
    width: 100vw;
    margin: 10vw;
    position: relative;
}
.bottom .tip .tip_blue,.bottom .tip .tip_green{
    background-color:#dad943;
    width: 4vw;
    height:4vw;
    position: absolute;
}
.bottom .tip .tip_green{
    background-color: #33b0cc;
    top:5vw;
}
.bottom .tip .tip_name{
    font-size: 4vw;
    color: #ffffff44;
    position: absolute;
    margin: 0;
    line-height: 4vw;
    left:5vw;
}
.bottom .tip .tip_total{
    font-size: 4vw;
    color: #2b819b88;
    position: absolute;
    line-height: 4vw;
    margin: 0;
    right:10vw;
    padding-right: 10vw;
    text-align: right;
}
.bottom .tip .tip_total_data{
    font-size: 6vw;
    color: #ffffff88;
    position: absolute;
    margin: 0;
    line-height: 6vw;
    right:10vw;
    padding-right: 10vw;
}
.bottom canvas{
    width: 80vw;
    height:40vw;
    margin: 38vw 10vw 10vw 10vw;
}
.button_setting{
    width: 9vw;
    height: 9vw;
    position: fixed;
    z-index: 100;
    top:3.5vw;
    right: 2vw;
    opacity: 0.5;
}
.button_setting:hover{
    opacity: 0.7;
}
.button_setting:active{
    opacity: 0.9;
}
.foot{
    width: 100vw;
    height:8vw;
    margin: 0;
    position: fixed;
    z-index: 99;
    bottom: 0;
    background-color: #123;
    border: 0;
}
.foot img{
    width: 6vw;
    height:6vw;
    position: absolute;
    left:71vw;
    margin-top: 1vw;
    opacity: 0.5;
}
.foot .name{
    position: absolute;
    font-size: 3vw;
    line-height: 8vw;
    color: #ffffff66;
    margin: 0;
    padding: 0 1vw 0 0;
    left:78vw;
}
.foot .ip{
    position: absolute;
    left:1vw;
    color: #2b819b88;
    font-size: 4vw;
    margin: 1vw 0 0 0;
}
.foot_line{
    height: 0.5vh;
    width: 100vw;
    background-color: #2b819b;
    position: absolute;
    bottom: 0;
    left:0;
}

.foot_box{
    width: 100vw;
    height: 8vw;
    background-color: #2b819b;
    position: absolute;
    bottom: 0;
    left: 0;
    clip-path: polygon(70% 0%,100% 0%,100% 100%,68% 100%);
}
.pop{
    width: 100vw;
    height: 100vh;
    position: fixed;
    top:0;
    left:0;
    background-color: #00000088;
    display: none;
    z-index: 100;
}
.pop .box{
    width:90vw;
    height:90vh;
    background-color: #123;
    margin: 5vh 0 0 5vw;
    position: relative;
    box-shadow: 0 0 1vh 1vh #0008;
}
.pop .box .bg{
    width: 89vw;
    height: 4vh;
    background-color: #2b819b;
    position: absolute;
    top:0;
    left:0;
    clip-path: polygon(0% 0%,100% 0%,100% 20%,50% 20%,47% 100%,0% 100%);
    padding: 0 0 0 1vw;
    line-height: 4vh;
    color: #fff;
    font-size: 2vh;
    font-weight: 900;
}
.pop .box .close{
    width:2vh;
    height:2vh;
    position: absolute;
    right:1vw;
    top:1.5vh;
    opacity: 0.5;
}
.pop .box .close:hover{
    opacity: 0.7;
}
.pop .box .close:active{
    opacity: 0.9;
}
.pop .box .center{
    width: 90vw;
    height: 84.9vh;
    position: absolute;
    left:0;
    top:5vh;
    overflow-x: hidden;
    overflow-y: auto;
}
.pop .box .center .vbox{
    width: 88vw;
    height:auto;
    padding: 1vh 1vw 1vh 1vw;
    position: relative;
}
.pop .box .center .vbox .head{
    width: 87vw;
    height: 3vh;
    padding: 0 0 0 1vw;
    background-color: #2b819b99;
    font-size: 2vh;
    line-height: 3vh;
    margin: 0;
    color:#fff8;
}
.pop .box .center .vbox .head_button{
    border:0;
    color: #fff6;
    font-size: 1.5vh;
    position: absolute;
    right:1vw;
    top:1vh;
    height:3vh;
    margin-right: 1vw;
    background-color: #0000;
}
.pop .box .center .vbox .head_button:hover{
    color:#fff8;
}
.pop .box .center .vbox .head_button:active{
    color:#fff6;
}
.pop .box .center .vbox .list,.pop .box .center .vbox .list2{
    width: 86vw;
    max-height: 50vh;
    padding: 0.5vh 1vw 0.5vh 1vw;
    overflow-y: auto;
    overflow-x: hidden;
}
.pop .box .center .vbox .list .item{
    width: calc( 86vw - 2vh );
    height: auto;
    overflow-y: hidden;
    padding: 1vh;
    position: relative;
}
.pop .box .center .vbox .list .item:hover{
    background-color: #ffffff08;
}
.pop .box .center .vbox .list .item img{
    width:6vh;
    height:6vh;
    float: left;
}
.pop .box .center .vbox .list .item .name,.pop .box .center .vbox .list .item .content{
    color:#fff9;
    margin: 0 0 0 1vh;
    width: 16vw;
    line-height: 3vh;
    position: absolute;
    left:7vh;
    top:1vh;
    font-size: 1.8vh;
}
.pop .box .center .vbox .list .item .content{
    top:4vh;
    color:#fff6;
}
.pop .box .center .vbox .add,.pop .box .center .vbox .sub{
    height:2vh;
    border-radius: 1vh;
    border: solid 1px #afa;
    color: #fff6;
    background-color: #0000;
    float: right;
    margin-top: 2vh;
    margin-left: 1vh;
    font-size: 1.2vh;
}
.pop .box .center .vbox .add:hover{
    border: solid 1px #2f2;
    color: #fff8;
}
.pop .box .center .vbox .add:active{
    border: solid 1px #8f8;
    color: #fff6;
}
.pop .box .center .vbox .sub{
    border: solid 1px #faa;
}
.pop .box .center .vbox .sub:hover{
    border: solid 1px #f44;
    color: #fff8;
}
.pop .box .center .vbox .sub:active{
    border: solid 1px #f88;
    color: #fff6;
}
.pop .box .center .vbox .list2 img{
    width:6vh;
    height:6vh;
    float: left;
}
.pop .box .center .vbox .list2 button{
    height:3vh;
    margin-top: 1.5vh;
    margin-left: 1vh;
    background-color: #fff4;
    border: solid 1px #fff4;
    border-radius: 0.5vh;
    color: #123;
    float: left;
    font-size: 1.2vh;
}
.pop .box .center .vbox .list2 button:hover{
    background-color: #fff8;
}
.pop .box .center .vbox .list2 button:active{
    background-color: #fffa;
}
.pop .box .center .vbox .list2 input{
    width:30vw;
    height:2.9vh;
    font-size: 1.2vh;
    margin-top: 1.5vh;
    margin-left: 4vw;
    float: left;
    background-color: #0000;
    border: solid 1px #fff4;
    outline: 0;
    color:#fffa;
}
.pop .box .center .row{
    width: 86vw;
    padding: 1vw;
}
.pop .box .center .row div{
    width: 60vw;
    margin-left: 13vw;
    overflow-y: hidden;
    margin-top: 1vh;
}
.pop .box .center .row div img{
    width:60vw;
    height:60vw;
    float: left;
}
.pop .box .center .row div button{
    border: solid 1px #fff8;
    color:#123;
    background-color: #fff8;
    border-radius: 1vw;
    width: 30vw;
    height: 3vh;
    font-size: 2vh;
    margin-left:15vw;
    margin-top: 1vw;
}
.pop .box .center .row div button:hover{
    background-color: #fffa;
}
.pop .box .center .row div button:active{
    background-color: #fff8;
}
.pop .box .center .row div p{
    color: #fff8;
    line-height: 3vh;
    font-size: 2vh;
    float: left;
    margin: 0;
}
.pop .box .center .row div input{
    width: 20vw;
    height: 2.6vh;
    float: left;
    margin: 0;
    background-color: #0000;
    border: solid 1px #fff8;
    outline: 0;
    color: #fffa;
    font-size: 2vh;
}
.pop .box .center .row div .ip{
    width: 10vw;
}
.pop .box .center .row div select{
    margin: 0;
    height:3vh;
    background-color: #0000;
    border: solid 1px #fff4;
    border-radius: 0.2vh;
    float: left;
    outline: 0;
    color: #fff8;
    min-width: 5vw;
    font-size: 1.5vh;
}
.pop .box .center .row div option{
    background-color: #123;
    color: #fff4;
}
.pop .box .center .row div div{
    width:60vw;
    margin-left: 0;
    margin-top: 0;
}
.pop .box .center .row div .button{
    background-color: #0000;
    color:#fff8;
    font-size: 3vw;
    width:9vw;
    border: solid 1px #fff2;
    margin-left: 0;
    margin-top: 0;
    float: right;
}
.pop .box .center .row div .button:hover{
    background-color: #fff1;
}
.pop .box .center .row div .button:active{
    background-color: #fff0;
}
.pop .delete_box{
    width:80vw;
    height:auto;
    background-color: #123;
    position: absolute;
    top:40vh;
    left:10vw;
    box-shadow: 0 0 1vh 1vh #0008;
}
.pop .delete_box .head{
    margin:0;
    width: 100%;
    height:3vh;
    background-color: #2b819b;
    color: #fff;
    font-weight: 900;
    font-size: 1.6vh;
    text-align: center;
    line-height: 3vh;
}
.pop .delete_box .content{
    color:#fff8;
    font-size: 1.4vh;
    text-align: center;
    word-break: break-word;
    word-wrap: break-word;
    padding: 1vh;
}
.pop .delete_box div{
    padding: 1vh 1vw 2vh 1vw;
}
.pop .delete_box div .affirm,.pop .delete_box div .delete{
    width: 20vw;
    height:3vh;
    font-size: 1.8vh;
    background-color: #fff8;
    color:#123;
    border: solid 1px #fff8;
    border-radius: 1vw;
}
.pop .delete_box div .affirm{
    margin-left: 18vw;
    background-color: #0000;
    color:#fff6;
}
.pop .delete_box div .delete{
    margin-left: 2vw;
}
.pop .delete_box div .delete:hover{
    background-color: #fffa;
}
.pop .delete_box div .delete:active{
    background-color: #fff8;
}
.pop .delete_box div .affirm:hover{
    background-color: #fff1;
}
.pop .delete_box div .affirm:active{
    background-color: #fff0;
}
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece,
::-webkit-scrollbar-button{
    background-color: #00000000;
    width: 5px;
}
::-webkit-scrollbar-thumb{
    background-color: #2b819b88;
    border-radius: 5px;
}